<!--  -->
<template>
<el-dialog
    v-model="dialogVisible"
    :title="ruleForm.id>0 ? '修改居民':'添加居民'"
    width="700"
    :before-close="handleClose"
  >
  <el-form  ref="ruleFormRef" :model="ruleForm"
    :rules="rules" class="elform" label-width="auto">
    
    <el-form-item class="photo" label="头像">

  <el-upload
   :headers="headers"
    class="avatar-uploader"
    :action="uploadUrl"
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload"
  >
    <img v-if="ruleForm.photo" :src="imgBaseUrl+ruleForm.photo" class="avatar" />
    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
  </el-upload>
     
    </el-form-item>
    <el-form-item label="楼栋">
     <Buildings @change="buildingChange" :default-value="ruleForm.buildingid" :checkStrictly="false"></Buildings>
    </el-form-item>
 
    <el-form-item prop="houseid" label="房间">
      <el-select v-model="ruleForm.houseid" placeholder="请选择房间">
        <el-option v-for="item in houses" :label="item.houseno" :value="item.id" />
 
      </el-select>
    </el-form-item>

    <el-form-item label="姓名" prop="name">
      <el-input v-model="ruleForm.name"  />
    </el-form-item>

    <el-form-item label="性别">
      <el-radio-group v-model="ruleForm.sex">
        <el-radio :value="1">男</el-radio>
        <el-radio :value="2">女</el-radio>
      </el-radio-group>

    </el-form-item>

    <el-form-item label="民族">
      <el-input v-model="ruleForm.nation"  />
    </el-form-item>

    <el-form-item label="籍贯">
      <el-input   v-model="ruleForm.usernative" />
    </el-form-item>

    <el-form-item label="证件">
      <el-input  v-model="ruleForm.cardid"  />
    </el-form-item>

    <el-form-item label="电话">
      <el-input  v-model="ruleForm.mobile"  />
    </el-form-item>

    <el-form-item label="类型">
      <el-select v-model="ruleForm.usertype" placeholder="请选择用户类型">
        <el-option v-for="item in userTypes" :label="item.name" :value="item.id" />
 
      </el-select>

    </el-form-item>

   </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">Cancel</el-button>
        <el-button type="primary" @click="submit">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {onMounted, reactive} from 'vue'
import { add,getUserTypeList } from '../../service/userinfo/userinfo';
import { UserInfo } from '../../service/userinfo/type';
import { getList } from '../../service/house/house';
import { ref,defineEmits,defineProps} from 'vue'
import { ElMessageBox,ElMessage,FormRules,FormInstance  } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'

import Buildings from '../building/Buildings.vue';

const uploadUrl=import.meta.env.VITE_BASE_URL+"upload/add";
const imgBaseUrl=ref(import.meta.env.VITE_IMG_URL);
const headers={Authorization:sessionStorage.getItem("token")}
const ruleFormRef = ref<FormInstance>()
//表单数据
const ruleForm = reactive<UserInfo>({
  id: 0,
        photo:"",
        name:"",
        houseid: null,
        buildingid:null,
        usertype:null,
        sex:0,
        mobile: "",
        usernative:"",
        cardid: "",
        nation:""
})
const props=withDefaults(defineProps<UserInfo>(),{
  id: 0,
        photo:"",
        name:"",
        houseid: null,
        usertype:null,
        sex:0,
        mobile: "",
        usernative:"",
        buildingid:null,
        cardid: "",
        nation:""
})

const rules = reactive<FormRules<UserInfo>>({
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' }
  ],
  houseid:[
    { required: true, message: '请选择房间', trigger: 'blur' }
  ]

})

//图片上传
import type { UploadProps } from 'element-plus'

// const imageUrl = ref('')

const handleAvatarSuccess: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {

  if(response.errCode===10000){

    ruleForm.photo=response.data;
  }
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png') {
    ElMessage.error('只能上传JPG|PNG格式文件!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('上传的图片不能超过2MB!')
    return false
  }
  return true
}



const dialogVisible = ref(true)

 

//获取用户类型
const userTypes=ref<any[]>([]);
const getUserTypeData=async ()=>{

  const res:any=await getUserTypeList();
  if(res.errCode===10000){
    userTypes.value=res.data.list;
  }

}

//选择楼栋
const buildingChange=(e:any)=>{

  ruleForm.houseid=null;
  if(e){
    getHouses(e);
  }
  else{
    houses.value=[];
  }
  
  
}

//获取房间列表

const houses=ref<any>([]);
const getHouses=async (buildingid:number)=>{
  const res:any=await getList({buildingid,psize:1000});
  if(res.errCode===10000){
    houses.value=res.data.list;
  }
}

const emit=defineEmits(["close"]);
const handleClose=()=>{
  emit("close");
}
//提交
const postData=async ()=>{

  const res:any=await add(ruleForm);
  if(res.errCode===10000){
    emit("close",true);
  }

}

const submit=async ()=>{
 
  await ruleFormRef.value!.validate((valid, fields) => {
    if (valid) {
      postData();
    } 
  })

}
onMounted(()=>{
  getUserTypeData();
  Object.assign(ruleForm,props);

  if(ruleForm.buildingid){
    getHouses(ruleForm.buildingid);
  }
})
</script>
 
<style scoped lang="less">
.elform{
    padding: 30px 50px;
    display: block;
    height:300px;
}
.el-form-item{
    width:260px ;
    height: 30px;
    float: left;
    margin-left: 20px;
    margin-bottom: 20px;

}
.photo{
   
    height:80px;
    display: flex;
    align-items: center;
    
}

/deep/ .avatar-uploader .el-upload {
  width: 80px;
  height: 80px;
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}
.avatar{
  width: 100%;
  height: 100%;
}

</style>